<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta name="referrer" content="no-referrer"/>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客管理</title>
  <link href="../static/images/favicon.ico" th:href="@{/images/favicon.ico}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"  />
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../static/css/element-ui-index.css" th:href="@{/css/element-ui-index.css}">
  <style>
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      /*margin-left: 10px;*/
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 190px;
      /*margin-left: 10px;*/
      vertical-align: bottom;
    }
  </style>

</head>
<body class="admin-body">

  <div id="app" class="d-flex flex-nowrap vh-100">
    <!--侧边栏-->
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-white" style="width: 280px;height: 100vh">
      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
        <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
        <span class="fs-4"><strong>ChenZhen</strong></span>
      </a>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
          <a href="./dashboard.html" th:href="@{/admin/dashboard}" class="nav-link link-dark" aria-current="page">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
            仪表盘
          </a>
        </li>
        <li class="nav-item">
          <a href="./blogs.html" th:href="@{/admin/blogs}" class="nav-link link-dark" aria-current="page">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
            文章管理
          </a>
        </li>
        <li>
          <a href="./types.html" th:href="@{/admin/types}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
            分类管理
          </a>
        </li>
        <li>
          <a href="./tags.html" th:href="@{/admin/tags}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
            标签管理
          </a>
        </li>
        <li>
          <a href="./friendlinks.html" th:href="@{/admin/friendlinks}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
            友链管理
          </a>
        </li>
        <li>
          <a href="./musics.html" th:href="@{/admin/musics}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
            音乐管理
          </a>
        </li>
        <li>
          <a href="./sys-configs.html" th:href="@{/admin/sys-configs}" class="nav-link active">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
            系统配置管理
          </a>
        </li>
        <li>
          <a href="./users.html" th:href="@{/admin/users}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
            用户管理
          </a>
        </li>
      </ul>
      <hr>
      <div class="dropdown">
        <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
          <strong>mdo</strong>
        </a>
        <ul class="dropdown-menu text-small shadow">
          <li><a class="dropdown-item" href="#">New project...</a></li>
          <li><a class="dropdown-item" href="#">Settings</a></li>
          <li><a class="dropdown-item" href="#">Profile</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
    </div>
    <div class="w-100 overflow-y-auto">
      <!--    顶部栏-->
      <header class="p-2 text-bg-dark">
        <div class="container">
          <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-end">
            <!--头像-->
            <img class="me-2 img-fluid rounded-5" width="40" height="40" src="../../static/images/me.jpg" th:src="@{${session.user.avatar}}">
            <!--名字-->
            <span class="me-3" th:src="@{${session.user.nickname}}" >ChenZhen</span>
            <div>
              <a href="#" @click="logout" class="btn btn-outline-light me-2">注销</a>
            </div>

          </div>
        </div>
      </header>
      <!--列表-->
      <div class="container-fluid mt-3 mb-3">
        <div class="card">
          <div class="card-body" >
            <div class="container-md " style="max-width: 1000px" >
              <!-- 切换导航栏 -->
              <el-tabs v-model="activeTab" @tab-click="handleTabClick">

                <el-tab-pane label="系统配置" name="SYS-CONFIG">
                  <el-form ref="form" :model="form" label-width="180px"  class="mt-5" >
                    <el-form-item label="站长名称">
                      <el-input v-model="form.author" placeholder="请输入站长名称"></el-input>
                    </el-form-item>

                    <el-form-item label="站点概览-个人简介（可以使用HTML标签）">
                      <el-input type="textarea" :rows="4" v-model="form.siteProfile" placeholder="请输入站点概览-个人简介"></el-input>
                    </el-form-item>

                    <el-form-item label="站点概览-位置">
                      <el-input v-model="form.siteLocation" placeholder="请输入位置"></el-input>
                    </el-form-item>

                    <el-form-item label="站点概览-邮箱">
                      <el-input v-model="form.siteEmail" placeholder="请输入邮箱"></el-input>
                    </el-form-item>

                    <el-form-item label="站点概览-QQ">
                      <el-input v-model="form.siteQq" placeholder="请输入QQ号"></el-input>
                    </el-form-item>

                    <el-form-item label="站点概览-微信">
                      <el-input v-model="form.siteWechat" placeholder="请输入微信号"></el-input>
                    </el-form-item>

                    <el-form-item label="关于我页面-自我介绍">
                      <el-input type="textarea" :rows="4" v-model="form.aboutMeIntroduction" placeholder="关于我页面-自我介绍"></el-input>
                    </el-form-item>

                    <el-form-item label="关于我页面-内容（可以使用HTML标签）">
                      <el-input type="textarea" :rows="4" v-model="form.aboutMeContent" placeholder="关于我页面-内容"></el-input>
                    </el-form-item>

                    <el-form-item label="关于我页面-我的技能">
                      <el-tag
                              :key="skill"
                              v-for="skill in form.aboutMeSkills"
                              closable
                              :disable-transitions="false"
                              @close="handleClose(skill)">
                        {{skill}}
                      </el-tag>
                      <el-input
                              class="input-new-tag"
                              v-if="inputVisible"
                              v-model="inputValue"
                              ref="saveTagInput"
                              size="small"
                              @keyup.enter.native="handleInputConfirm"
                              @blur="handleInputConfirm"
                      >
                      </el-input>
                      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增技能</el-button>
                    </el-form-item>

                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>

                  </el-form>
                </el-tab-pane>

                <el-tab-pane label="第三方服务" name="THIRD-SERVICE">
                  <el-form ref="form" :model="form" label-width="180px"  class="mt-5" >
                    <el-form-item label="CSDN的Session">
                      <el-input type="textarea" :rows="4" v-model="form.csdnSession" placeholder="请输入Session"></el-input>
                    </el-form-item>

                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>

                  </el-form>

                </el-tab-pane>
              </el-tabs>

            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</body>

  <script src="../../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
  <!-- import Vue before Element -->
  <script src="../../static/lib/vue.js"                   th:src="@{/lib/vue.js}"></script>
  <!-- import JavaScript -->
  <script src="../../static/lib/element-ui-index.js"      th:src="@{/lib/element-ui-index.js}"></script>
  <script src="../../static/lib/axios.min.js"             th:src="@{/lib/axios.min.js}"></script>
  <script src="../../static/lib/axiosInstance.js"         th:src="@{/lib/axiosInstance.js}"></script>

  <script>
      new Vue({
        el: '#app',
        data: function() {
          return {
            list: [],
            total: 0, // 总记录数
            searchForm: {
              pageNum: 1, // 当前页
              pageSize: 10  // 每页显示条数
            },
            // 表单显示
            dialogVisible: false,
            inputVisible: false,
            inputValue: '',
            formLabelWidth: '120px',
            form: {
              author: '',
              aboutMeIntroduction:'',
              aboutMeContent:'',
              aboutMeSkills:[],
              siteProfile:'',
              siteLocation:'',
              siteEmail:'',
              siteQq:'',
              siteWechat:'',
              csdnSession:''
            },
            activeTab: 'SYS-CONFIG'

          }

        },
        methods:{
          //获取分页数据
          fetchPage(){
            axiosInstance.get(`/admin/sys-configs/page`).then(res => {
              if (res.code === 20000){
                this.form = res.data.sysConfig;
              }

            })
          },
          handleClose(skill) {
            this.form.aboutMeSkills.splice(this.form.aboutMeSkills.indexOf(skill), 1);
          },
          showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
              this.$refs.saveTagInput.focus();
            });
          },
          handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
              this.form.aboutMeSkills.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
          },
          // 分页切换
          handleCurrentChange(currentPage) {
            this.searchForm.pageNum = currentPage;
            this.fetchPage();
          },
          onSubmit(){
            // 有ID更新
            axiosInstance.put(`/admin/sys-configs`, this.form)
                    .then(resp => {
                      if(resp.code === 20000){
                        this.$message.success('更新成功');
                        this.fetchPage();
                      }

                    })
                    .catch(error => {
                      console.error(error);
                    });
          },
          // 处理导航栏点击事件
          handleTabClick(tab) {
            // 切换表格数据源
              this.activeTab = tab.name;
          },
          logout(){
            axiosInstance.get('/admin/logout').then(res => {
              if (res.code === 20000){
                location.href = "/admin";
              }
            })
          }

        },

        mounted(){
          this.fetchPage()
        }
      })



  </script>

</html>
